$(function () {


    let stats = null
    $('.btn_pub').on('click', function () {
        stats = '已发布'
    })
    $('.btn_cg').on('click', function () {
        stats = '草稿'
    })
    var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike', 'image'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        /*  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
         [{ 'header': [1, 2, 3, 4, 5, 6, false] }], */

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean']                                         // remove formatting button
    ];

    var quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow'
    });
    //初始化文章的分类
    function initCateList() {
        $.get('/my/article/cates', function (res) {
            if (res.status === 0) {
                //基于模板引擎，动态渲染下拉菜单
                const htmlStr = template('tmpl-select', res)
                $('[name="cate_id"]').html(htmlStr)

                $(".ql-toolbar select").attr('lay-ignore', '')

                //让 layui 重新渲染一下表单中的下拉菜单
                layui.form.render('select')

                //将副文本编辑器中的下拉菜单隐藏掉
                $('.ql-toolbar select').css('display', 'none')

            }
        })
    }
    initCateList()

    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 400,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)


    $('#btnChooseImage').on('click', function () {
        $('#file').click()
    })
    //为文件选择框绑定 change事件
    $('#file').on('change', function (e) {
        const files = e.target.files
        if (files.length === 0) return

        //进行封面的替换
        const imgStr = URL.createObjectURL(files[0])
        //销毁旧的裁剪区域
        $image.cropper('destroy')
        //为裁剪区域的img重新设置src地址
        $image.attr('src', imgStr)
        //重新初始化裁剪区域
        $image.cropper(options)
    })

    //为发布表单绑定submit事件
    $('.form_pub').on('submit', function (e) {
        e.preventDefault()

        //获取数据
        const fd = new FormData()
        //把文章的标题存入fd中
        fd.append('title', $('[name="title"]').val().trim())
        //把类别存入fd中
        fd.append('cate_id', $('[name="cate_id"]').val().trim())
        //把文章内容存入fd中
        fd.append('content', quill.root.innerHTML)
        //把文章的状态存入fd中
        fd.append('state', stats)
        //把裁剪的封面存入fd中
        $image.cropper('getCroppedCanvas', {
            width: 400,
            height: 400
        })
            .toBlob(function (blob) {
                //形参中的blob就是裁剪得到的图片文件
                fd.append('cover_img', blob)

                //把准备好的数据发送给服务器
                $.ajax({
                    type: 'POST',
                    url: '/my/article/add',
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        layer.msg(res.message)
                        console.log(res);
                        if (res.status === 0) {
                            location.href = '/article/art_list.html'
                        } else {

                        }
                    }
                })
            })
    })
})